إضافة ميزة الأولوية في Laravel

إنشاء تطبيق قائمة مهام بسيط باستخدام Laravel 5 – الجزء الرابع: إضافة ميزة تحديد الأولوية وتنظيم المهام

في الأجزاء السابقة من هذا المقال، قمنا بتغطية أساسيات بناء تطبيق قائمة مهام باستخدام Laravel 5، مع التركيز على كيفية إنشاء الهيكل الأساسي للتطبيق، وكيفية إضافة مهام جديدة وعرضها في واجهة المستخدم. في هذا الجزء الرابع، سنتناول كيفية إضافة ميزة جديدة للتطبيق، وهي تحديد الأولوية لكل مهمة في القائمة، بالإضافة إلى كيفية تنظيم المهام بناءً على هذه الأولوية.

1. مقدمة

عند استخدام أي تطبيق لإدارة المهام، من المهم أن تكون قادرًا على تصنيف المهام بناءً على أولويتها. هذا يتيح للمستخدمين التعامل مع المهام الأكثر أهمية أولًا. لذلك، سنقوم بتعديل تطبيق قائمة المهام الذي أنشأناه في الأجزاء السابقة ليتضمن ميزة الأولوية. سنستخدم Laravel 5 لإضافة هذه الميزة.

2. تخطيط قاعدة البيانات

قبل البدء في كتابة الكود، نحتاج أولاً إلى تعديل قاعدة البيانات لدينا. سنقوم بإضافة عمود جديد إلى جدول المهام لتخزين الأولوية.

في هذه الحالة، سنقوم بإضافة عمود يسمى priority في جدول المهام. لتطبيق هذا التعديل، سنحتاج إلى إنشاء ملف ترحيل (migration) جديد.

2.1 إنشاء الترحيل

نفتح الطرفية (Terminal) وننفذ الأمر التالي لإنشاء ملف ترحيل جديد:

bash
CopyEdit
php artisan make:migration add_priority_to_tasks_table --table=tasks

سيقوم هذا الأمر بإنشاء ملف ترحيل جديد في مجلد database/migrations. الآن، نقوم بتعديل هذا الملف لإضافة عمود priority.

2.2 تعديل ملف الترحيل

افتح الملف الذي تم إنشاؤه في مجلد database/migrations، ثم أضف العمود priority إلى الجدول:

php
CopyEdit
public function up()
{
    Schema::table('tasks', function (Blueprint $table) {
        $table->enum('priority', ['low', 'medium', 'high'])->default('medium');
    });
}

public function down()
{
    Schema::table('tasks', function (Blueprint $table) {
        $table->dropColumn('priority');
    });
}

هنا، نستخدم enum لتعريف قيم الأولوية المحتملة: low (منخفضة)، medium (متوسطة)، وhigh (عالية). كما أن القيمة الافتراضية هي medium.

2.3 تنفيذ الترحيل

بعد تعديل ملف الترحيل، نقوم بتطبيق التعديلات على قاعدة البيانات عبر تنفيذ الأمر التالي:

bash
CopyEdit
php artisan migrate

3. تعديل نموذج المهام (Model)

ننتقل الآن إلى نموذج Task لتحديثه بحيث ينعكس التغيير الذي أضفناه إلى قاعدة البيانات.

افتح ملف Task.php الموجود في مجلد app وأضف priority إلى خاصية $fillable للسماح بتحديث الأولوية من خلال النموذج.

php
CopyEdit
class Task extends Model
{
    protected $fillable = ['title', 'description', 'priority'];
}

4. تعديل واجهة المستخدم (UI)

الآن، نحن بحاجة إلى تعديل واجهة المستخدم بحيث يمكن للمستخدمين اختيار الأولوية عند إضافة أو تعديل المهام.

4.1 تحديث نموذج إضافة المهمة

افتح الملف الذي يحتوي على نموذج إضافة المهام، والذي يكون غالبًا في resources/views/tasks/create.blade.php. أضف حقلًا لاختيار الأولوية في النموذج.

php
CopyEdit
class="form-group">
    <label for="priority">Prioritylabel>
    <select name="priority" id="priority" class="form-control">
        <option value="low">Lowoption>
        <option value="medium" selected>Mediumoption>
        <option value="high">Highoption>
    select>
div>

4.2 تحديث نموذج تعديل المهمة

إذا كان لدينا نموذج لتعديل المهام، نحتاج أيضًا إلى إضافة نفس الحقل في هذا النموذج. افترض أن الملف الذي يحتوي على نموذج تعديل المهمة هو resources/views/tasks/edit.blade.php.

php
CopyEdit
class="form-group">
    <label for="priority">Prioritylabel>
    <select name="priority" id="priority" class="form-control">
        <option value="low" {{ $task->priority == 'low' ? 'selected' : '' }}>Low
        "medium" {{ $task->priority == 'medium' ? 'selected' : '' }}>Medium
        "high" {{ $task->priority == 'high' ? 'selected' : '' }}>High
    

5. تعديل وحدة التحكم (Controller)

الخطوة التالية هي تعديل وحدة التحكم (TaskController) لتشمل منطق التعامل مع الأولوية.

افتح ملف TaskController.php الموجود في مجلد app/Http/Controllers، ثم قم بتعديل دالة store (التي تقوم بإضافة مهمة جديدة) ودالة update (التي تقوم بتحديث مهمة موجودة) بحيث تدعمان الحقل الجديد priority.

5.1 تعديل دالة store

php
CopyEdit
public function store(Request $request)
{
    $request->validate([
        'title' => 'required|string|max:255',
        'description' => 'required|string|max:1000',
        'priority' => 'required|in:low,medium,high',
    ]);

    Task::create([
        'title' => $request->title,
        'description' => $request->description,
        'priority' => $request->priority,
    ]);

    return redirect()->route('tasks.index');
}

5.2 تعديل دالة update

php
CopyEdit
public function update(Request $request, Task $task)
{
    $request->validate([
        'title' => 'required|string|max:255',
        'description' => 'required|string|max:1000',
        'priority' => 'required|in:low,medium,high',
    ]);

    $task->update([
        'title' => $request->title,
        'description' => $request->description,
        'priority' => $request->priority,
    ]);

    return redirect()->route('tasks.index');
}

6. عرض المهام بناءً على الأولوية

الآن وقد تم إضافة ميزة الأولوية، سنقوم بتعديل طريقة عرض المهام في واجهة المستخدم بحيث يتم ترتيبها بناءً على الأولوية.

افتح ملف resources/views/tasks/index.blade.php، حيث يتم عرض جميع المهام، وأضف منطقًا لعرض المهام مع ترتيبها حسب الأولوية. سنستخدم في هذه الحالة Laravel Eloquent لترتيب المهام.

php
CopyEdit
@foreach ($tasks->sortBy('priority') as $task)
    
class="task">
        <h3>{{ $task->title }}
        
{{ $task->description }}
        
Priority: {{ $task->priority }}
    
@endforeach

هنا، نستخدم طريقة sortBy من Eloquent لترتيب المهام حسب الأولوية، بحيث تظهر المهام ذات الأولوية الأعلى أولًا.

7. اختبار التطبيق

الآن وبعد تنفيذ كل التعديلات، نقوم بتشغيل التطبيق في المتصفح ونتحقق من أن جميع الميزات تعمل بشكل صحيح. يجب أن نتمكن من إضافة مهام جديدة، وتعديل المهام القديمة، ورؤية المهام مرتبة حسب الأولوية.

8. الخلاصة

في هذا الجزء من المقال، قمنا بإضافة ميزة تحديد الأولوية وتنظيم المهام في تطبيق قائمة المهام البسيط باستخدام Laravel 5. تعلمنا كيفية تعديل قاعدة البيانات لإضافة عمود priority، وكيفية تعديل النماذج وواجهات المستخدم لتمكين المستخدمين من تحديد الأولوية لكل مهمة. كما تعلمنا كيفية ترتيب المهام في واجهة المستخدم بناءً على الأولوية.

إن إضافة مثل هذه الميزات إلى تطبيقات إدارة المهام يمكن أن تساعد في تحسين تجربة المستخدم وزيادة فعالية العمل.